import React from "react";
import { useSearchParams } from "react-router-dom";
import style from "./style.module.scss";
import url1 from "../../../assets/images/icon/common resource/hdpi/common_button_collection_small_n.png";
import url3 from "../../../assets/images/icon/common resource/hdpi/common_button_collection_small_s.png";
import url2 from "../../../assets/images/icon/common resource/hdpi/common_icon_comment_small_n.png";
import {
  MyHeader,
  MyTagdisease,
  MypatientCieclefooter,
  NavTitle,
  MaskBack,
  ConfirmMask,
  SickCircleCommentList,
  LazyImage,
} from "../../../components";
import {
  deleteCollection,
  getpathentCircleDetail,
  pathentCircleDetailDataStart,
  postCollection,
} from "../../../api/patientCircle";
import { useBoolean, useRequest } from "ahooks";
import { dateFormat } from "../../../utils/formatTime";
import { Notify } from "react-vant";

// import arrowImg from "../../../assets/images/image/xxhdpi/arrow.png";
// import wrtingImg from "../../../assets/images/image/xxhdpi/copywriting.png";
// import selsctImg from "../../../assets/images/image/xxhdpi/selsct.png";

const Index: React.FC = () => {
  const [searchParams] = useSearchParams();
  const sickCircleId = Number(searchParams.get("sickCircleId"));
  // 显示/隐藏 蒙层
  const [showFallConfirm, { setFalse: setFCFalse, setTrue: setFCTrue }] =
    useBoolean(false);

  /************************ 请求 *********************************/
  // 获取数据
  const {
    data: detailData = {
      sickCircleId: 0,
      authorUserId: 0,
      departmentId: 0,
      adoptFlag: 0,
      title: "",
      department: "",
      disease: "",
      detail: "",
      treatmentHospital: "",
      treatmentStartTime: "",
      treatmentEndTime: "",
      treatmentProcess: "",
      picture: "",
      collectionFlag: "",
      collectionNum: "",
      commentNum: 0,
      adoptNickName: "",
      adoptHeadPic: "",
      adoptComment: "",
      adoptTime: 0,
    },
    run,
  } = useRequest<pathentCircleDetailDataStart, []>(async () => {
    const resp = await getpathentCircleDetail({ sickCircleId });
    console.log(resp);
    return resp.result;
  });

  // 收藏/取消收藏病友圈
  const toCollect = async (iscollect) => {
    console.log(iscollect);
    iscollect === 2
      ? postCollection({ sickCircleId }).then((resp) => {
          if (resp.status === "0000") {
            Notify.show({
              type: "success",
              message: resp.message,
            });
            run();
          }
        })
      : deleteCollection({ sickCircleId }).then((resp) => {
          if (resp.status === "0000") {
            Notify.show({
              type: "warning",
              message: resp.message,
            });
            run();
          }
        });
  };

  return (
    <div
      className={style.detail}
      style={{ overflowY: showFallConfirm ? "hidden" : "auto" }}
    >
      <div className={style.header}>
        <MyHeader></MyHeader>
      </div>
      <div className={style.content}>
        <div className={style.content_text}>
          <p className={style.adoptNickName}>{detailData.title}</p>
          <MyTagdisease
            title="病症"
            disease={detailData.disease}
          ></MyTagdisease>
          <MyTagdisease
            title="科室"
            disease={detailData.department}
          ></MyTagdisease>
          <MyTagdisease
            title="病症详情"
            disease={detailData.detail}
          ></MyTagdisease>
          <MyTagdisease
            title="治疗经理"
            treatmentHospital={detailData.treatmentHospital}
            timer={`${dateFormat(
              detailData.treatmentStartTime,
              "yyyy.MM.dd"
            )}-${dateFormat(detailData.treatmentEndTime, "MM.dd")}`}
            disease={detailData.treatmentProcess}
          ></MyTagdisease>
          <MyTagdisease
            title="相关图片"
            picture={detailData.picture}
          ></MyTagdisease>
        </div>
        <ul className={style.collect}>
          <li onClick={() => toCollect(detailData.collectionFlag)}>
            <img src={detailData.collectionFlag === 1 ? url3 : url1} alt="" />
            <span>{detailData.collectionNum}</span>
          </li>
          <li onClick={() => setFCTrue()}>
            <img src={url2} alt="" />
            <span>{detailData.commentNum}</span>
          </li>
        </ul>
        <div className={style.suggestbox}>
          <NavTitle title="被采纳的建议"></NavTitle>
          {detailData.adoptFlag === 1 ? (
            <div className={style.suggest_childrenbox}>
              <div className={style.suggest_header}>
                <div className={style.user}>
                  <LazyImage src={detailData.adoptHeadPic} alt="" />
                  <div>
                    <p>{detailData.adoptNickName}</p>
                    {/* <p>{detailData.adoptNickName}</p> */}
                  </div>
                </div>
                <p className={style.suggest_timer}>
                  {dateFormat(detailData.adoptTime, "yyyy.MM.dd")}
                </p>
              </div>
              <div className={style.suggest_text}>
                {detailData.adoptComment}
              </div>
            </div>
          ) : (
            <div className={style.suggest_childrenbox}></div>
          )}
        </div>
        <div className={style.footer}>
          {/* <MypatientCieclefooter></MypatientCieclefooter> */}
        </div>
      </div>
      <MaskBack
        isOpen={showFallConfirm}
        content={
          <SickCircleCommentList
            sickCircleId={sickCircleId}
            closeMask={() => {
              setFCFalse();
              run()
            }}
          />
        }
      />
    </div>
  );
};
export default Index;
